자료실
구분 | 제목 | 내용 |
---|---|---|
무료 이미지 | 픽사베이 (pixabay.com) | 56만장 이상의 고화질 사진 제공 |
픽스히어 | 무료 재고 사진 제공 | |
한국관광공사 무료이미지 | 한국관광공사에 의한 '공공누리 제1유형' 지정 콘텐츠 | |
공공누리 | 공공저작권 신탁관리 시스템 / 공공저작물을 자유롭에 이용하도록 허락 | |
포토AC (photo-ac.com) | 200만장의 무료 고화질 이미지 제공 | |
스톡업 (stock-up) | 키워드를 이용한 빠른 검색 | |
픽점보 (picjumbo) | 디자이너와 사진작가가 제공하는 감성적 이미지 | |
언스프래시 (unsplash) | 작품급 사진 제공 | |
픽셀즈 (pexels) | 빈티지의 풍경이나 감성적인 인물 사진 제공 | |
foodiesfeed | 고화질 음식 이미지 제공 | |
New old stock | 저작권 끝난 이미지 제공, 오랜된 느낌의 사진 제공 | |
이미지그라퍼 | 이미지 공유 및 거래 | |
프리큐레이션 | 저작권에 문제 없는 이미지 제공 | |
모그파일 | 상업적 무료 이미지 제공 | |
프리스톡스 | 상업적 무료 이미지 제공 | |
얼라우트 | 고해상도 상업적 사용가능한 이미지 제공 | |
프리벡터즈 | 고퀄리티 벡터 이미지 제공 | |
프리픽 | 벡터 이미지 제공 | |
퍼블릭도메인벡터스 | 간단한 벡터이미지를 제공 | |
벤치마킹 | 디비컷 | 국내 사이트 |
지디웹 | 국내 사이트 | |
awwwards | 전문가 패널이 평가하는 곳 | |
직선 | 일본 웹디자인 모음 | |
핀터레스트 | 다양한 주제의 작품을 볼수 있다 | |
비핸스 | 외국 사이트 모음 | |
베스트 디자인 | 여러 해외 웹디자인이 업테이트 됨 | |
드리블 | 세계 각국의 디자이너들의 작품을 제공 | |
HTML·CSS·jQuery | WCAG 2.0 기술 | w3에서 알려주는 WCAG 2.0 기술(영문) |
jQuery | jQuery 사이트(영문) | |
HTML DRIVE | 다양한 jQuery 소스 모음 | |
KOREA HTML5 | HTML5 기술지원 | |
부스트랩 | 반응형 웹을 위한 프레임워크 | |
웹 접근성 연구소 | 웹접근성 기술 지원 | |
와우 슬라이더 | jQuery를 이용한 이미지 활용 예제 제공 | |
라이트 슬라이더 | 다양한 이미지 슬라이드 예제 제공 | |
버튼 생성 | 여러가지 모양의 버튼을 만들어 준다 | |
교육 | NCIA 교육센터 | 스마트 / IoT / 네트워크 / 빅데이터 |
TIS정보기술교육센터 | 자바스크립트 / 빅데이터 / 웹표준&웹퍼블리싱 | |
KIPFA | 웹디자인 / IT / UX / UI / 마케팅 | |
배운나라 | 웹디자인 / OA / 자격증 / 인터넷 | |
폰트 | 다폰트 | 외국 폰트 사이트 |
네이버 나눔글꼴 | 나눔체(상업적 무료 사용 가능) | |
눈누 | 무료 폰트 제공(저작권 범위를 꼭 확인하세요) | |
구글 폰트 한국어 | 구글 폰트(인터넷 폰트 제공) | |
폰트어썸 (상용법) | 폰트 형태로 아이콘을 제공하는 사이트 | |
툴 및 자료 | 픽슬(편집기) | 온라인 이미지 편집기 |
브러쉬이지 | 포토샵 브러쉬 모음 | |
브라우져숏 | 브라우저 크로싱 | |
W3C CSS 검증서비스 | CSS/HTML 문법검사 | |
W3C 마크업 검증서비스 | 웹 문서 마크업 검증 | |
파비코 | ICO파일 만들기 | |
그라디헌트 | CSS로 그라데이션 효과 주기 | |
CSS 점이 생성기 | CSS로 그라데이션 효과 주기 | |
색상 조화 | 컬러헌터 | 이미지를 컬러 팔레트로 생성 |
컬러러버스 | 디자이너들의 색상 업데이트 | |
컬러 팔레트 생성기 | 원하는 이미지로 색상조합을 만들어준다 | |
디자인 스피드 | 자연 이미지에서 찾은 색상조합을 제공 |
Points(pt) | Pixels(px) | Ems(em) | Perscent(%) |
---|---|---|---|
일반 문서 (1포인트 = 0.72인치) | 모니터에 따른 상대적 크기 | 해당폰트의 대문자 M의 너비가 기준 (상속받은 속성에 대한 백분율) | 기본글꼴 크기에 대한 상대값 (상속받은 속성에 대한 백분율) |
6pt | 8px | 0.5em | 50% |
7pt | 9px | 0.55em | 55% |
7.5pt | 10px | 0.625em | 62.5% |
8pt | 11px | 0.7em | 70% |
9pt | 12px | 0.75em | 75% |
10pt | 13px | 0.8em | 80% |
10.5pt | 14px | 0.875em | 87.5% |
11pt | 15px | 0.95em | 95% |
12pt | 16px | 1em | 100% |
13pt | 17px | 1.05em | 105% |
13.5pt | 18px | 1.125em | 112.5% |
14pt | 19px | 1.2em | 120% |
14.5pt | 20px | 1.25em | 125% |
15pt | 21px | 1.3em | 130% |
16pt | 22px | 1.4em | 140% |
17pt | 23px | 1.45em | 145% |
18pt | 24px | 1.5em | 150% |
20pt | 26px | 1.6em | 160% |
22pt | 29px | 1.8em | 180% |
24pt | 32px | 2em | 200% |
속성 | 내용 |
---|---|
display:table | table 태그 |
display:table-caption | caption 태그 |
display:table-column-group | colgroup 태그 |
display:table-header-group | thead 태그 |
display:table-footer-group | tfoot 태그 |
display:table-row-group | tbody 태그 |
display:table-cell | td 태그 |
display:table-coulmn | col 태그 |
display:table-row | tr 태그 |